<%--
  Created by IntelliJ IDEA.
  User: XTT
  Date: 2022/10/14
  Time: 16:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--引入 element-ui 的样式，-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 必须先引入vue，  后使用element-ui -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<!-- 引入element 的组件库-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<html>
<head>
    <title>联系方式</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .content{
            margin-top: 40px;
            width: 100%;
            height: 500px;
        }
        .content p{
            margin-left: 200px;
        }
        .footer{
            width: 100%;
            height: 200px;
            background-color: #393D49;
            text-align: center;
            margin-top: 40px;
        }
        .footer-fiv{
            width: 390px;
            float: left;
            margin-left: 50px;
            margin-top: 20px;
        }
        ul{
            margin-left: 145px;
            padding-top: 15px;
        }
        ul li{
            display: inline;
            padding-left: 20px;
        }
        .nb{
            text-indent: 2em;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="content">
        <p style="font-size: 30px;font-family: 华文楷体">联系方式</p>
        <br>
        <p style="color: #393D49; width: 350px;line-height: 30px">
            酒店坐落于xx市xx区xx路，距新国际博览
            中心约2.5公里，地铁9号线（xx路站x号口）下
            地铁，约50米即到；靠近地铁x号线科技馆站。自
            酒店出发驱车前往世博馆、陆家嘴商圈约15分钟车
            程，临近的大拇指广场，联洋广场，金桥国际广
            场，嘉里中心等休闲购物广场是您忙碌之余的好去
            处；世纪公园、东方艺术中心，xx科技馆步行即
            达，让您享受别样的海派艺术氛围
        </p>
        <p style="margin-top: 10px;font-weight: 600"><span>地址：</span><span style="padding-left: 52px">xx市xx区xx路</span></p>
        <p style="margin-top: 10px;font-weight: 600"><span>电话：</span><span style="padding-left: 50px">0775-110120130140</span>
        <p style="margin-top: 10px;font-weight: 600"><span>Email：</span><span style="padding-left: 39px">1152445687@qq.com</span>
        <p style="margin-top: 10px;font-weight: 600"><span>Fac：</span><span style="padding-left: 55px">+(12)345 67890</span>
        <div style="width: 500px;margin-top: -423px;float: right;margin-right: 270px">
            <el-form :rules="rules" ref="formInline" :inline="true" :model="formInline" class="demo-ruleForm">
                <el-form-item prop="user">
                <el-col :span="38">
                    <el-input v-model="formInline.user" placeholder="Name" autocomplete="off" style="display: inline"></el-input>
                </el-col>
                </el-form-item>
                <el-form-item prop="email">
                <el-col :span="38">
                    <el-input v-model="formInline.email" autocomplete="off" placeholder="Email" style="display: inline"></el-input>
                </el-col>
                </el-form-item>
                <el-form-item prop="desc">
                        <el-input type="textarea" :autosize="{ minRows: 8, maxRows: 2}" placeholder="Your Review" v-model="formInline.desc" autocomplete="off" style="width:430px"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit('formInline')" style="width: 200px;background-color: #FFB800;border: 1px solid #FFB800">现在提交</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <div class="footer">
        <div class="footer-fiv" style="margin-top: 20px">
            <p style="padding-right: 60px;color: white;font-size: 50px;font-family: 华文彩云;">ikun</p>
            <p style="padding-left: 110px;padding-top: 10px;color: white">利用模板做的案例解析，共同学习参考</p>
        </div>
        <div class="footer-fiv">
            <p><strong style="color: #FFB800;padding-right: 45px">联系我们</strong></p>
            <p style="color: white;padding-top: 30px">qq:1352441260</p>
            <p style="color: white;padding-right: 20px;padding-top: 10px">群号：待申请</p>
            <p style="color: white;padding-left: 60px;padding-top: 10px">同一个地球，同一片蓝天</p>
        </div>
        <div class="footer-fiv">
            <p><strong style="padding-right: 50px;color: #FFB800">最新的</strong></p>
            <p style="color: white;padding-top: 30px">欢迎预定测试</p>
        </div>
    </div>
    <footer style="height: 50px;background-color: #1b1d21;border-top: 1px solid black">
        <ul style="color: white">
            <li>接触</li>
            <li>使用条款</li>
            <li>隐私</li>
            <li>环保政策</li>
            <li style="padding-left: 400px">Copyright &copy; 2022 Alt rights 91tt | This ikun is made with ♥</li>
        </ul>
    </footer>
</div>

</body>
<script>
    new Vue({
        el:'#app',
        data() {
            let checkEmail = (rule, value, callback) => {
                let emailReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
                // const sfzhReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
                if (value) {
                    if (emailReg.test(value)) {
                        callback()
                    } else {
                        callback(new Error('邮箱格式不正确'))
                    }
                } else {
                    callback(new Error('请输入邮箱'))
                }
            }
            //姓名验证
            let xm = (rule, value, callback) => {
                let hhName = /^[\u4e00-\u9fa5]{2,4}$/
                // const sfzhReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
                if (value) {
                    if (hhName.test(value)) {
                        callback()
                    } else {
                        callback(new Error('姓名格式不正确'))
                    }
                } else {
                    callback(new Error('请输入姓名'))
                }
            }
            return {
                formInline: {
                    user: '',
                    email: '',
                    desc:''
                },
                rules:{
                    email:{required: true,validator: checkEmail,trigger: 'blur'},
                    user:{required: true,validator:xm,trigger: 'blur'},
                    desc:{required: true,message:'请输入内容',trigger: 'blur'}
                }
            }
        },
        methods:{
            onSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                    this.$confirm('是否确认提交?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '提交成功!'
                        },
                        console.log(this.formInline)
                        );
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                })
            }
        }
    })
</script>
</html>
